<template>
  <div class="addMenus">
    <el-form ref="form" label-width="80px">
      <el-form-item label="规格名称">
        <el-input class="input" v-model="form.specsname"></el-input>
      </el-form-item>
      <el-form-item label="规格属性"  class="input1">
        <el-input class="input" v-model="form.attrs[0]"></el-input>
        <el-button @click="add" type="primary">新增规格属性</el-button>
      </el-form-item>
      <el-form-item v-for="n,index in num" :key="index+new Date().getTime()" label="规格属性" class="input2">
        <el-input class="input" v-model="form.attrs[n]" ></el-input>
        <el-button @click="cut(index+1)" type="danger">删除</el-button>
      </el-form-item>
      <el-switch
        class="mode"
        v-model="form.status"
        inactive-text="状态"
        :active-value="1"
        :inactive-value="2"
      >
      </el-switch>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <el-button type="info" @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {  getSpecsApi,setSpecsApi } from "@/api/specs";
export default {
  data() {
    return {
      form: {
        specsname: "",
        attrs: [],
        status: 1,
      },
      num: 0
    };
  },
  mounted() {
    this.getOne()
  },
  methods: {
    //先获取数据渲染
    async getOne(){
        let res=await getSpecsApi(this.$route.query.id)
        console.log(res);
        this.num=res.list[0].attrs.length-1
        this.form=res.list[0]
    },
    //新增input框
    add(){
      this.num++
    },
    //删除input框
    cut(index){
      this.form.attrs.splice(index,1)
      this.num--
      /* console.log(this.form.arr); */
    },
    //提交添加事件
    async onSubmit() {
      let temp =this.form.attrs.join(',')
      this.form.attrs=temp
      this.form.id=this.$route.query.id
      let res = await setSpecsApi(this.form);
      if (res.code == 200) {
        this.$message({
          type: "success",
          message: res.msg,
        });
        this.getOne()
      } else {
        this.$message({
          type: "warning",
          message: res.msg,
        });
      }
    },
    //返回
    back() {
      this.$router.push("/specs");
    },
  },
};
</script>
<style scoped lang="less">
.addMenus {
  .input {
    width: 40%;
  }
  .mode {
    margin: 0 0 30px 12px;
  }
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/ .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.input1 {
    width: 950px;
}
.input2 {
    width: 1000px;
}
</style>
